<template>
  <el-container>
    <el-main>
      <div class="mbx p-4">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>技术文档</el-breadcrumb-item>
          <el-breadcrumb-item>Vue</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
     
      <div class="mbx mt-4 p-4">
        <template>
          <div>
            <h4 class="pb-2">热门标签</h4>
            <div class="bq">
              <router-link
                v-for="item in tagList"
                :key="item.id"
                :to="`/tag/${item.text}`"
                :style="{ color: getColor(), fontSize: getSize() }"
                >{{ item.text }}
              </router-link>
            </div>
          </div>
        </template>
      </div>
      <div class="mbx mt-4 p-4">
        <el-row :gutter="12">
           
          <el-col :span="8">
            <el-tooltip
              class="item"
              effect="dark"
              content="Bottom Center 提示文字"
              placement="bottom"
            >
              <el-card shadow="hover"> 鼠标悬浮时显示 </el-card>
            </el-tooltip>
          </el-col>
      
        </el-row>
        <div v-for="(item, i) in 150" :key="i">返回顶部测试{{ i }}</div>
      </div>
      

      <el-backtop></el-backtop>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "MyFile",

  data() {
    return {
      tagList: [
        {
          id: 1,
          text: "前端",
        },
        {
          id: 2,
          text: "JavaScript",
        },
        {
          id: 3,
          text: "Node.js",
        },
        {
          id: 4,
          text: "Vue",
        },
        {
          id: 5,
          text: "webpack",
        },
        {
          id: 6,
          text: "个人总结",
        },
        {
          id: 7,
          text: "React",
        },
        {
          id: 8,
          text: "TypeScript",
        },
      ],
    };
  },
  methods: {
    /*随机字体颜色*/
    getColor() {
      var colorArr = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f".split(",");
      var color = "#";
      for (var i = 0; i < 6; i++) {
        color += colorArr[Math.floor(Math.random() * 16)];
      }
      return color;
    },
    /*随机字体大小*/
    getSize() {
      return Math.floor(Math.random() * 10 + 16) + "px";
    },
  },
};
</script>
<style>



.bq a {
  text-decoration: none;
  padding: 2px;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}
</style>